<template>
      <div class="nav">
        <img src="../../assets/img_2.png" width="250px" alt="即刻运动" class="icon">
       <div class="menu">
         <el-menu
                  class="el-menu-demo"
                  mode="horizontal"
                  background-color="#000000"
                  active-text-color="#ffcc00"
                  :default-active="activeIndex" router>
           <el-menu-item index="shouye">首页</el-menu-item>
           <el-menu-item index="video">视频</el-menu-item>
           <el-menu-item index="courses">课程</el-menu-item>
           <el-menu-item index="food">饮食</el-menu-item>
<!--           <el-menu-item index="5">论坛</el-menu-item>-->
         </el-menu>
       </div>
        <div CLASS="upload">
          <el-dropdown :hide-on-click="false"  placement="bottom">
            <span style="color:black;font-size: 20px;cursor:pointer;" class="el-dropdown-link">
              <i class="el-icon-upload" ></i>上传</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button style="font-size: 18px;color:black" type="text" @click="videoupload()">视频投稿</el-button>
              </el-dropdown-item>
<!--              <el-dropdown-item>-->
<!--                <el-button style="font-size: 18px;color:black" type="text" @click="people()">发布帖子</el-button>-->
<!--              </el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div CLASS="name">
          <el-dropdown :hide-on-click="false">
            <span style="color: azure;font-size: 16px;cursor:pointer;" class="el-dropdown-link"> <i class="el-icon-s-custom" ></i>
          你好!{{this.username}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button style="font-size: 18px;color:black" type="text" @click="enter()">进入空间</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button style="font-size: 18px;color:black" type="text" @click="people()">个人中心</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定要退出吗？"
                  v-on:confirm="layout()">
                  <el-button style="font-size: 18px;color:black" slot="reference" type="text">退出登录</el-button>
                </el-popconfirm>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
</template>

<script>
    export default {
      name: "FrontHead",
      data() {
        return {
          activeIndex: 'shouye',
          username:null,
        };
      },
      methods: {
        videoupload: function(){
          this.$router.push("/videoupload");
        },
        enter: function(){
          this.$router.push("/home");
        },
        people: function(){
          this.$router.push("/personal");
        },
        layout: function(){
          this.$router.push("/login");
        },
        indexs:function() {
          this.username=sessionStorage.getItem("username");
        },
      } ,
      created() {
        //自动加载indexs方法
        this.indexs();
      }
    }
</script>

<style>
.icon{
  position: fixed;
  left: 15%;
  top: 10px;

}
.nav{
  position: fixed;
  width: 100%;
  height: 70px;
  background-color:black;
  z-index:10;
}
.menu{
  position: fixed;
  width: 600px;
  height: 100px;
  left: 32%;
}
.el-menu.el-menu--horizontal{
  border: none;
}
.el-menu-item{
  font-size: 20px;
  padding:0px 25px;
}
.el-menu-item-group .el-menu-item.demo:hover{
  color: yellow !important;
}
.upload{
  position: fixed;
  left: 65%;
  width:100px;
  height: 40px;
  top: 15px;
  font-size: 20px;
  background-color:#ffcc00;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
}
.name{
  position: fixed;
  left: 75%;
  top: 23px;
  color: white;
}
::v-deep .el-dropdown-menu {
  position: absolute!important;
  min-width: 222px;
  left: auto!important;
  right: 0;}
.popper__arrow{
  left: 50%!important;
}
</style>
